<template>
  <div class="f-form-flow-edit-config">
    <el-tabs v-model="activeTab" @tab-change="activeTabChange">
      <el-tab-pane label="流程配置" name="flowProperty">
        <div class="f-form-flow-edit-config-tab-body">
          <FlowProperty :flowDefinition="flowDefinition"
                        :formDefinition="formDefinition" ref="FlowProperty"/>

          <div class="f-form-flow-edit-config-footer">
            <el-button type="warning" round icon="cancel">取消</el-button>
            <el-button type="primary" round icon="save" @click="saveFlow">保存</el-button>
          </div>
        </div>
      </el-tab-pane>
      <el-tab-pane label="流程设计" name="flowModel">
        <div class="f-form-flow-edit-config-tab-body">
          <FlowModelDesigner ref="FlowModelDesigner"/>
        </div>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import './style.css';
import FlowProperty from '@/components/flow/FlowProperty.vue';
import {DefaultFormDefinition} from '@/components/form/DefaultFormDefinition';
import {DefaultFlowDefinition} from '@/components/flow/DefaultFlowDefinition';
import FlowModelDesigner from '@/components/flow/FlowModelDesigner';

export default {
  name: 'FormFlowDesign',
  components: {
    FlowProperty,
    FlowModelDesigner,
  },
  data() {
    return {
      activeTab: 'flowProperty',
      formDefinition: DefaultFormDefinition,
      flowDefinition: DefaultFlowDefinition,
      originFlowDefinition: DefaultFlowDefinition,
    };
  },
  mounted() {
    console.log('mounted');
    this.$nextTick(() => {
      this.componentMounted();
    });
  },
  methods: {
    componentMounted() {
      this.$windowManager.bindMethod('setData', this.setData);
      this.$windowManager.bindMethod('setFormDefinition', this.setFormDefinition);
      this.$windowManager.emit('componentMounted', window);
    },
    setData(flowDefinition) {
      this.flowDefinition = JSON.parse(JSON.stringify(flowDefinition));
      this.originFlowDefinition = flowDefinition;

      this.$nextTick(() => {
        this.$refs.FlowProperty.setData(this.flowDefinition);
      });
    },
    setFormDefinition(formDefinition) {
      this.formDefinition = formDefinition;
    },
    activeTabChange() {
      if (this.activeTab === 'flowModel') {
        this.$nextTick(() => {
          this.$refs.FlowModelDesigner.setFormDefinition(this.formDefinition);
          this.$refs.FlowModelDesigner.setData(this.flowDefinition);
        });
      }

      if (this.activeTab === 'flowProperty') {
        this.$nextTick(() => {
          this.$refs.FlowModelDesigner.getFlowModel()
          this.$refs.FlowModelDesigner.setFormDefinition(this.formDefinition);
          this.$refs.FlowProperty.setData(this.flowDefinition);
        });
      }
    },
    saveFlow() {
      this.$refs.FlowProperty.getData().then(value => {
        this.$windowManager.emit('updateFlow', this.flowDefinition);
        this.$windowManager.close();
      });
    },
  }
};
</script>
